<template>
	<!--产品数据-->
	<view class="com-content">
		<view class="com-top2">
			<image class="com-body-img" :src="obj.url || obj.img_url" mode="aspectFill"  @click.stop="look(obj.url || obj.img_url)"></image>
			<view class="com-body-box">
				<view class="box-name">{{obj.image_name || obj.img_name}}</view>
				<view class="box-txt" v-if="pageType==='pop'">
					<block v-for="(item,iii) in obj.attr" :key="iii">
						<view class="box-txt-li">{{item}}</view>
					</block>
				</view>
				<view class="box-remark">备注：{{obj.mark}}</view>
			</view>
		</view>
		<view class="com-body">
			<block v-for="(item,index) in obj.datalist" :key="index">
				<view class="com-body-li">
					<view class="li-title"><text class="li-title-t">{{item.name}}</text></view>
					<block v-for="(ite,ind) in item.data" :key="ind">
						<template v-if="pageType==='pop' && ite.data.length>0">
							<view class="li-box">{{ite.name}}</view>
							<block v-for="(it,i) in ite.data" :key='i'>
								<view class="li-box-li">
									<view class="li-box-o">{{it.name}}</view>
									<view class="li-box-t">{{it.width}} cm x {{it.height}} cm</view>
									<view class="li-box-th">{{it.number}}</view>
								</view>
							</block>
						</template>
						<template v-else-if="pageType==='pop'">
							<view class="li-box-li2">
								<view class="li-box-o">{{ite.name}}</view>
								<view class="li-box-t">{{ite.width}} cm x {{ite.height}} cm</view>
								<view class="li-box-th">{{ite.number}}</view>
							</view>
						</template>
						<template v-else-if="pageType==='prop'">
							<view class="li-box-li2">
								<view class="li-box-o">{{ite.name}}</view>
								<view class="li-box-th">{{ite.number}}</view>
							</view>
						</template>
					</block>
					<view class="li-texture" v-if="item.texture && item.texture.length>0 && pageType==='pop'">材质：
						<block v-for="(li,ii) in unique(item.texture)" :key="ii">
							<view class="li-texture-txt">{{li}}</view>
						</block>
					</view>
				</view>
			</block>
		</view>
		<!--定制-->
		<view class="com-body">
			<view class="com-body-li" v-if="pageType==='pop' && obj.textures.length>0">
				<view class="li-title" >
					<text class="li-title-t">定制</text>
				</view>
				<view v-for="(aa,bb) in obj.textures" :key="bb" v-if="obj.textures.length>0">
					<view class="li-box-li2">
						<view class="li-box-o">{{aa.texture_name}}</view>
						<view class="li-box-t">{{aa.width}} cm x {{aa.height}} cm</view>
						<view class="li-box-th">{{aa.number}}</view>
					</view>
				</view>
				<!-- <image class="li-texture-bot4" @click.stop="sel_mats(iiii)" :src="$mAssetsPath.icon_add_but">
				</image> -->
			</view>	
		</view>
		<view class="com-body">
			<view class="com-body-count" v-if="obj.price != null && is_show_price">
				<view class="count-name">供应商：<text class="count-name-txt">{{obj.supplier_name}}</text></view>
				<view class="count-money">金额：¥{{obj.price}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		unique
	} from '@/common/util.js';
	export default {
		name: "com-top",
		components: {},
		props: {
			is_show_price:{
				type:Boolean,
				default:true
			},
			obj: {
				type: Object,
				default () {
					return {
						count_money: 999,
						sup_name: '供应商一',
						pro_img: '/static/data-img/img.jpg',
						pro_name: 'XX系列图片系列图片系列图片',
						pro_txt: ['男', '鞋', '都市'],
						remark: '此订单需注意尺寸',
						datalist: [{
							pro_name: '橱窗',
							texture: ['塑料', '玻璃', '棉'],
							list: [{
								type: 1,
								name: '玻璃贴',
								list: [{
									name: '玻璃左',
									sizew: '570',
									sizeh: '370',
									num: 1
								}, {
									name: '玻璃右',
									sizew: '570',
									sizeh: '370',
									num: 1
								}, ]
							}, {
								name: '背景海报',
								type: 2,
								sizew: '500',
								sizeh: '370',
								num: 3
							}, {
								name: '道具POP',
								type: 2,
								sizew: '500',
								sizeh: '370',
								num: 3
							}]
						}]
					}
				}
			},
			pageType:{
				type:String,
				default:'pop'
			}
		},
		data() {
			return {

			}
		},
		methods: {
			unique,
			look(url){
				var imgArr = []
				 imgArr.push(url);
				//预览图片
				uni.previewImage({
					urls: imgArr,
					current: 0
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.com-content {
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 30rpx 30rpx 0 30rpx;

		.com-top2 {
			display: flex;
			flex-direction: column;
			margin-bottom: 30rpx;

			.com-body-img {
				width: 100%;
				height: 388rpx;
				border-radius: 10rpx;
				margin-bottom: 30rpx;
				overflow: hidden;
			}

			.com-body-box {
				display: flex;
				flex-direction: column;
				border-bottom: 1rpx solid #f5f5f5;

				.box-name {
					font-size: 32rpx;
					font-weight: 400;
					color: $font-color-3;
					margin-bottom: 26rpx;
				}

				.box-txt {
					display: flex;
					margin-bottom: 26rpx;

					.box-txt-li {
						height: 38rpx;
						line-height: 38rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: $font-color-9;
						padding: 0 20rpx;
						background: $uni-bg-color-grey;
						border-radius: 4rpx;
						margin-right: 20rpx;
					}
				}

				.box-remark {
					padding: 20rpx 0;
					border-top: 1rpx solid #f5f5f5;
					font-size: 28rpx;
					font-weight: 400;
					color: #FE5252;
				}
			}
		}

		.com-body {
			display: flex;
			flex-direction: column;

			.com-body-count {
				display: flex;
				justify-content: space-between;

				.count-name {
					font-size: 28rpx;
					font-weight: 400;
					line-height: 40rpx;
					color: $font-color-3;

					.count-name-txt {
						color: $font-color-9;
					}
				}

				.count-money {
					font-size: 28rpx;
					font-weight: 400;
					line-height: 40rpx;
					color: #FE5252;
				}
			}

			.li-texture {
				display: flex;
				border-top: 1rpx solid #f5f5f5;
				border-bottom: 1rpx solid #f5f5f5;

				.li-texture-txt {
					margin-right: 30rpx;
				}
			}

			.com-body-li {
				display: flex;
				flex-direction: column;
				margin-bottom: 20rpx;
				font-size: 28rpx;
				font-weight: 400;
				line-height: 80rpx;
				color: $font-color-3;

				.li-box-li {
					display: flex;
					justify-content: center;
					align-items: center;

					.li-box-o {
						padding-left: 30rpx;
						flex: 30;
					}

					.li-box-t {
						flex: 50;
						display: flex;
						justify-content: center;
					}

					.li-box-th {
						flex: 20;
						display: flex;
						justify-content: flex-end;
					}
				}

				.li-box-li2 {
					display: flex;
					justify-content: center;
					align-items: center;

					.li-box-o {
						padding-right: 30rpx;
						flex: 30;
					}

					.li-box-t {
						flex: 50;
						display: flex;
						justify-content: center;
					}

					.li-box-th {
						flex: 20;
						display: flex;
						justify-content: flex-end;
					}
				}

				.li-title {
					display: flex;
					margin-bottom: 20rpx;

					.li-title-t {
						padding: 0 10rpx;
						background: #CBE6FF;
						border-radius: 6rpx;
						font-size: 32rpx;
						line-height: 52rpx;
						color: $font-color-3;

					}
				}
			}
		}
	}
</style>
